<template>
  <!-- <mtitles :showBack="false" titleDdx="炖大侠" name="颐而康外膳" textLeft="left" paddinLeft="46rpx" bgColor="linear-gradient(167deg, #09EC8D -50.6%, #FFF 106.77%)">
  </mtitles> -->
  <!-- <uni-nav-bar left-icon="left" right-icon="cart" color="#fff" title="小颐有约" backgroundColor="#56BF7A"  :border="false"/> -->
	<view class="container">
		<!-- <view class="text-xl text-end shopname">颐而康隆平店</view> -->
		<view class="hytit">贵宾 , 您好：</view>
		<view class="text-xll padding-left-lg letter8">请选择您所需要的服务</view>
		<view class="main flex padding-lr-lg">
			<!-- 单个排队pd -->
			<view class="left tw flex flex-direction justify-center align-center"
				@click.stop="mnavTo('/pages/order/creatOrder/creatOrder')">
				<block v-if="0">
					<view class="acon-a-Frame9779 xicon"></view>
					<view class="text-xl text-bold mttext">我要点单</view>
				</block>
				<block v-if="1">
					<view class="tw_lef flex flex-direction justify-center align-center"
						@click.stop="mnavTo('/pages/order/creatOrder/creatOrder')">
						<view class="acon-a-Frame9779 xicon"></view>
						<view class="text-xl text-bold margin-top-lg">我要点单</view>
					</view>
					<view class="tw_lef  flex flex-direction justify-center align-center margin-top"
						@click.stop="mnavTo('/pages/others/mineLine/mineLine')">
						<view class="acon-paidui xicon"></view>
						<view class="text-xl text-bold margin-top-lg">AI点单</view>
					</view>
				</block>
			</view>
			<view class="right flex-sub w_z flex flex-direction padding-left-lg">
				<view class="havBox flex flex-direction justify-center align-center nponter"
					@click.stop="mnavTo('/pages/others/checkCode/checkCode')">
					<view class="acon-meituan havico"></view>
					<view class="text-xl margin-top-xs">美团核销</view>
				</view>
				<view class="cvbox org text-center text-xl" @click.stop="mnavTo('/pages/user/coupon/coupon')">我的优惠券</view>
				<view class="cvbox text-center text-xl nponter" @click.stop="mnavTo('/pages/others/rechargeCard/rechargeCard')">充值
				</view>
				<view class="dbox flex-sub flex justify-between">
					<view class="sublbx nponter padding-lr blu flex align-center"
						@click.stop="mnavTo('/pages/others/openVipcard/openVipcard')">
						<view class="text-center">开卡</view>
					</view>
					<view class="sublbx nponter padding-lr flex align-center">
						<view class="text-center" @click.stop="mnavTo('/pages/user/user/user')">我的</view>
					</view>
					<!-- <view class="sublbx padding-lr flex align-center"><view class="text-center" @click="showM = !showM">更多服务</view></view> -->
				</view>
			</view>
			
		</view>
		<uni-transition ref="ani" custom-class="transition" :mode-class="['fade','slide-left']" :show="showM">
			<view class="botSec margin-top flex justify-between">
				<view class="btItem">技师查询</view>
				<view class="btItem">订单查询</view>
				<view class="btItem">余额查询</view>
			</view>
		</uni-transition>
		<!-- <transition name="fade-left">
		      <ul v-if="showM" class="botSec margin-top-xl flex justify-between text45">
		        <li class="btItem">技师查询</li>
		        <li class="btItem">订单查询</li>
		        <li class="btItem">余额查询</li>
		      </ul>
		    </transition> -->

		<view class="fixedBox" :class="{lg:windowHeight>667}">去了解颐而康足浴/按摩/艾灸/SPA文化></view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad } from '@dcloudio/uni-app';
	import { mnavTo } from '@/utils/helper';
	import mapi from '@/utils/mapi';
	const showM = ref(false)
	const windowHeight = ref(0)
	onLoad(() => {
     const sys:any = uni.getWindowInfo()||{};
     windowHeight.value = sys.windowHeight||0;
	})
</script>

<style lang="scss">
  /* #ifdef H5  */
  body{
    height: 100%;
    overflow: hidden !important;
  }
  /* #endif */
	.container {
    /* #ifdef MP-WEIXIN  */
		min-height: 100vh;
    /* #endif */
		background: #56BF7A;
		color: #fff;
		// padding-bottom: 40rpx;
		overflow: hidden;
		position: relative;
	}

	.shopname {
		padding: 20rpx 110rpx 20rpx 0;
	}

	.hytit {
		font-size: 60rpx;
		padding: 75rpx 0 26rpx 40rpx;
	}

	// .pl90 {
	// 	padding-left: 90rpx;
	// }
	.main {
		margin-top: 70rpx;
		// padding: 0 110rpx 0 90rpx;
		width: 100%;
		height: 722rpx;

		.text45 {
			font-size: 45rpx;
		}

		.left {
			width: 292rpx;
			height: 100%;
			background: #ffd65a;
			border-radius: 10rpx;

			&.tw {
				background: none;
			}

			&.pd {
				background: #FFC79E;
			}
		}

		.xicon {
			font-size: 80rpx;
		}

		.mttext {
			margin-top: 110rpx;
		}

		.right {

			// padding-left: 56rpx;
			.havBox {
				height: 256rpx;
				background: #50d1ef;
				box-shadow: 0rpx 0rpx 30rpx rgba(0, 52, 82, 0.1);
				border-radius: 10rpx;
			}

			.havico {
				font-size: 86rpx;
			}

			.cvbox {
				margin-top: 22rpx;
				height: 122rpx;
				line-height: 122rpx;
				background: #c8a4d9;
				box-shadow: 0rpx 0rpx 30rpx rgba(0, 52, 82, 0.1);
				border-radius: 10rpx;

				&.org {
					background: #ff9700;
				}
			}

			.dbox {
				// height: 100%; //168
				width: 100%;
				margin-top: 22rpx;
			}

			.sublbx {
				height: 100%; //168
				width: 150rpx;
				font-size: 45rpx;
				background: #fff;
				box-shadow: 0rpx 0rpx 30rpx rgba(0, 52, 82, 0.1);
				border-radius: 10rpx;
				color: #56bf7a;

				&.blu {
					background: #a7d5ff;
					color: #fff;
					margin-right: 28rpx;
				}
			}
		}
	}

	.tw_lef {
		width: 100%;
		border-radius: 10rpx;
		height: calc(100% - 15rpx);
		background: #ffd65a;

		&:nth-last-child(1) {
			background: #FFC79E;
		}

	}

	.botSec {
		padding: 0 65rpx 0 45rpx;
	}

	.btItem {
		// text-align: center;
		padding: 25rpx 45rpx;
		// flex: 1;
	}

	.fixedBox {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 40rpx;
		padding-left: 90rpx;

		&.lg {
			bottom: 0;
			height: 144rpx;
			padding-bottom: 16rpx;
			line-height: 128rpx;
			background: rgba(255, 255, 255, 0.05);
		}
	}

	.letter8 {
		letter-spacing: 8rpx;
	}
</style>